<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NewsLister(Ajax表示デモ)</title>
<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="newslister/feed.php?viewtype=rss" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css" /> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0/build/cssfonts/fonts-min.css" /> 
<style type="text/css">
<!--
	body{font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";background-color:#fff;}
	#wrapper {width:300px; margin:50px auto;font-size:93%;}
	#newslister ul { width:300px; margin:10px auto; border-top:dotted 1px #999; padding-top:5px;}
	#newslister li { list-style:none; }
	#newslister li em { display:block;float:left;clear:left; width:80px; margin-bottom:5px; padding-bottom:5px;border-bottom:dotted 1px #999;}
	#newslister li strong { display:block;margin-left:80px;margin-bottom:5px; border-bottom:dotted 1px #999; padding-bottom:5px; }
	h1 {background-color:#111;color:#fff;padding:5px 10px;margin:0 0 10px 0}
	h2 {background-color:#888;color:#fff;padding:5px 10px;margin:30px 0 10px 0;}
	h3 {border-bottom:solid 1px #888;color:#888;font-weight:bold;font-size:100%;margin:30px 0 10px 0;}
	ol,ul,p,pre {margin:10px 0;}
	ul li {list-style:circle inside;}
	ol li {list-style: decimal-leading-zero inside;}
	li {margin:5px 0;line-height:1.4;}
	code{color: #066;display:block;padding:5px;}
	dt {font-weight:bold;}
	dd {margin:0 0 10px 1.5em;}
	a { text-decoration:none; }
	
	.pagelink {overflow:hidden;display:inline-block;margin:0}
	.pagelink li {float:left;margin-right:3px;list-style:none;}
	.pagelink a { padding:2px 5px; border: solid 1px; color:#09F}
	.pagelink li.next a,
	.pagelink li.prev a {border:none;}
	.pagelink a.current {border:none;border-bottom:solid 1px;}
	.pagelink a:hover {background-color:#09F;border-color:#09F;color:#fff;}
-->
</style>
<script type="text/javascript" src="include/mootools-1.2.4.js"></script>
<script type="text/javascript" src="newslister.js"></script>

<!--script type="text/javascript" src="jquery-1.3.2.min.js"></script-->
<!--script type="text/javascript" src="newslister.jquery.plugin.js"></script-->
<script type="text/javascript">
//<![CDATA[
//MooTools.lang.setLanguage('ja-JP');
window.addEvent('domready', function(){
		new NewsLister({pass:'feed.php'});	
	});
//]]>
</script>
</head>

<body>

<div id="wrapper">
<h1>NewsLister</h1>
<div id="newslister"></div>

<h2>設置方法</h2>
<ol><li>config.phpを開いて設定する<br />
環境によってはadmin.jsの変更も必要。</li>
	<li>ファイルをサーバーへ転送する</li>
	<li>パーミッションを変更する</li>
	<li>admin.phpへアクセスして動作確認する</li>
</ol>
<p>file://の環境下ではAjaxの表示確認が出来ません。</p>
<h2>パーミッション</h2>
<p>suEXECの例：</p>
<ul>
	<li>ディレクトリ ―― 711</li>
	<li>php　―― 700</li>
	<li>ログファイル　―― 600</li>
	<li>他　―― 604</li>
</ul>
<h2>スクリプト導入方法</h2>
<ol>
	<li>mootools-coreとnewslister.jsを読み込む</li>
	<li>必要があればMoreを読み込む<br />
（Request.JSONP、Date, Date.Extrasが必要）</li>
	<li>window.addEvent("domready")などでインスタンス作成</li>
	</ol>
<pre><code>
window.addEvent('domready', function(){<br />
	new NewsLister(); <br />
});</code></pre>
<h2>オプション</h2>
<p>オブジェクト形式で指定する</p>
<pre><code>new NewsLister({pass:'feed.php'});</code></pre>
<dl><dt>logarea</dt><dd>ログ表示要素のID</dd>
<dt>pass</dt><dd>feed.phpまでのパス</dd>
<dt>loader</dt><dd>ローデイング画像</dd>
<dt>method</dt><dd>ログ読み込み時のメソッド</dd>
<dt>max</dt><dd>ログの最大表示数</dd>
<dt>style</dt><dd>出力形式（リストor段落）</dd>
<dt>dateformat</dt><dd>日付のフォーマット。<a href="http://mootools.net/docs/more/Native/Date#Date:format">MooToolsのdate.formatに依存</a></dd>
<dt>diff</dt><dd>経過時間の表示</dd>
</dl>

<h3>diffについて</h3>
<p>デフォルトはtwitterと同じ英語表記になります。<br />
DateのLocalizationファイルを読み込み、setメソッドでデフォルト言語を設定することで各国の表記に変更可能です。</p>
<p><a href="http://github.com/holyshared/mootools-more">holy氏作日本語ファイル</a></p>
<pre><code>MooTools.lang.setLanguage('ja-JP');</code></pre>
</div>
</body>
</html>
